<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>腾讯地图轨迹绘制(自定义图标)</title>
    <style>
        #container {
            width: 100%;
            height: 600px;
        }
        body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=UJCBZ-WJ2K7-I7UX2-HYIOY-G2R7F-N4FQM"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        // 初始化地图，设置漠河市中心点
        const map = new TMap.Map("container", {
            center: new TMap.LatLng(52.9721, 122.5372), // 漠河市中心点坐标
            zoom: 13
        });

        // 轨迹坐标点数据（示例）
        const points = [
            {lat: 52.9721, lng: 122.5372, time: "08:00"},  // 漠河市中心
            {lat: 52.9823, lng: 122.5201, time: "08:15"},
            {lat: 52.9876, lng: 122.5302, time: "08:30"},
            {lat: 52.9754, lng: 122.5456, time: "08:45"}
        ];

        // 创建轨迹线
        const polyline = new TMap.MultiPolyline({
            map: map,
            geometries: [{
                id: 'track_line',
                styleId: 'line_style',
                paths: points.map(p => new TMap.LatLng(p.lat, p.lng))
            }],
            styles: {
                'line_style': new TMap.PolylineStyle({
                    color: '#3777FF',
                    width: 5,
                    borderWidth: 2,
                    borderColor: '#FFF'
                })
            }
        });

        // 创建自定义图标样式
        const iconStyles = {
            'custom_start': new TMap.MarkerStyle({
                width: 32,
                height: 32,
                anchor: { x: 16, y: 32 },
                src: 'start.png' // 起点图标
            }),
            'custom_end': new TMap.MarkerStyle({
                width: 32,
                height: 32,
                anchor: { x: 16, y: 32 },
                src: 'end.png' // 终点图标
            }),
            'custom_normal': new TMap.MarkerStyle({
                width: 24,
                height: 24,
                anchor: { x: 12, y: 24 },
                src: 'marker.png' // 普通点图标
            })
        };

        // 添加标记点(使用自定义图标)
        const markerLayer = new TMap.MultiMarker({
            map: map,
            styles: iconStyles, // 使用自定义图标样式
            geometries: points.map((point, index) => {
                // 判断是否为起点或终点
                let styleId;
                if (index === 0) {
                    styleId = 'custom_start'; // 第一条数据使用起点图标
                } else if (index === points.length - 1) {
                    styleId = 'custom_end'; // 最后一条数据使用终点图标
                } else {
                    styleId = 'custom_normal'; // 中间点使用普通图标
                }

                return {
                    id: `point_${index}`,
                    position: new TMap.LatLng(point.lat, point.lng),
                    properties: {
                        title: `时间: ${point.time}`,
                        index: index,
                        pointType: index === 0 ? '起点' : 
                                 (index === points.length - 1 ? '终点' : '途经点')
                    },
                    styleId: styleId
                };
            })
        });

        // 点击标记点显示信息
        markerLayer.on('click', (evt) => {
            const { geometry } = evt;
            const info = `坐标点 ${geometry.properties.index + 1}<br>
                         位置: ${geometry.position.lat.toFixed(4)}, ${geometry.position.lng.toFixed(4)}<br>
                         时间: ${geometry.properties.title}`;
            
            new TMap.InfoWindow({
                map: map,
                position: geometry.position,
                content: info
            });
        });

        // 调整视图以显示所有点
        const bounds = new TMap.LatLngBounds();
        points.forEach(point => bounds.extend(new TMap.LatLng(point.lat, point.lng)));
        map.fitBounds(bounds);
    </script>
</body>
</html>
